<template>
	<view class="scoreShopContent">
		<view class="header">
			<view class="left">
				<view class="avatar">
					<image :src="user.avator" mode="aspectFill"></image>
				</view>
				<view class="info">
					<view class="title">当前积分</view>
					<view class="score">{{user.score}}</view>
				</view>
			</view>
			<view class="right">
					<view class="sign-btn" @click="doSign()">签到领积分</view>
			</view>
		</view>
		<view class="tabbar-box">
			<scroll-view scroll-x>
				<view class="scroll-item" :class="{'act':actTabBar == -1}" @click="toggleTabBar(-1)">全部</view>
				<view class="scroll-item" :class="{'act':actTabBar == 1}" @click="toggleTabBar(1)">会员</view>
				<view class="scroll-item" :class="{'act':actTabBar == 2}" @click="toggleTabBar(2)">卡密</view>
				<view class="scroll-item" :class="{'act':actTabBar == 3}" @click="toggleTabBar(3)">独家</view>

			</scroll-view>
		</view>
		<view class="good-list">
			<goodItemVue v-for="(item , index) in list" :item="item"></goodItemVue>
		</view>
		<uni-load-more :status="hasMore && isLoading ? 'loading' : 'noMore'"></uni-load-more>
	</view>

</template>

<script setup>
	import {
		ref
	} from 'vue';
	import goodItemVue from '@/components/good-item/good-item.vue';
	import {
		onLoad,
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app"
	import {
		apiDoSign,
		apiGetGoods
	} from '@/api/apis';
	let actTabBar = ref(-1)
	let list = ref([])
	const user = ref([])
	let page = ref(1)
	let hasMore = ref(true)
	let isLoading = ref(false)
	const getGoods = async () => {
		await apiGetGoods({
			type: actTabBar.value,
			page: 1
		}).then(res => {
			list.value = res.data.data.data
			user.value = res.data.user
		})
	}
	// 切换商品列表
	const toggleTabBar = (id) => {
		actTabBar.value = id
		getGoods()
	}
	onReachBottom(async () => {
		if (isLoading.value || !hasMore.value) return
		isLoading.value = true
		page.value = page.value + 1
		await apiGetGoods({
			page: page.value
		}).then(res => {
			if (res.data.data.data.length > 0) {
				isLoading.value = false
				list.value = [...list.value, ...res.data.data.data]
				if (!res.data.data.has_more) hasMore.value = false
			} else {
				hasMore.value = false
				isLoading.value = false
			}
		})

	})
	// 签到
	const doSign = async () => {
		await apiDoSign().then(res => {
			uni.showToast({
				icon: "none",
				title: res.msg
			})
		})
	}
	getGoods()
</script>

<style lang="scss" scoped>
	.scoreShopContent {
		padding: 20rpx;

		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10rpx;
			background-color: #f8f9fe;
			border-radius: 20rpx;

			.left {
				padding: 20rpx;
				display: flex;
				align-items: center;

				.info {
					.title {
						color: #777;
						font-size: 28rpx;
					}

					.score {
						color: #000;
						font-size: 38rpx;
						font-weight: 700;
					}
				}

				.avatar {
					width: 76rpx;
					height: 76rpx;
					border-radius: 50%;
					overflow: hidden;
					margin-right: 20rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.sign-btn {
				background-color: $theme-color;
				border-radius: 38rpx;
				color: #fff;
				padding: 16rpx 30rpx;
				font-size: 28rpx;
			}


		}

		.tabbar-box {
			overflow: hidden;
			white-space: nowrap;
			width: 100%;
			margin: 50rpx 0;

			.scroll-item {
				display: inline-block;
				text-align: center;
				line-height: 60rpx;
				border-radius: 40rpx;
				font-size: 28rpx;
				margin-right: 20rpx;
				padding: 0 30rpx;
				color: #606875;
				background-color: #f3f4f6;
			}

			.act {
				background-color: $theme-color;
				color: #fff;
			}
		}

		.good-list {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 54rpx;
		}
	}
</style>